<!--
 * @Author: LiYuan
 * @Date: 2021-04-01 10:46:59
 * @LastEditTime: 2021-04-07 18:06:54
 * @LastEditors: LiYuan
 * @Description: 订单信息
 * You build it, You run it.
-->
<template>
  <div class="order-info">
    <div class="sparpart-order">
      <div class="title">{{$t('common.base.sparePart')}}</div>
      <div class="order-detail">
        <div v-for="sparpartOrder in orderSheet.sparePartDetailList" :key="sparpartOrder.id">
          <div class="order-detail-row" >
            <div class="order-detail-col">{{$t('common.base.name')}}：{{sparpartOrder.name}}</div>
            <div class="order-detail-col">{{$t('common.base.serialNumber')}}：{{sparpartOrder.primarySN}}</div>
            <div class="order-detail-col">{{$t('common.form.preview.serviceItem.colum3')}}：{{sparpartOrder.primaryType}}</div>
          </div>
          <div class="order-detail-row" >
            <div class="order-detail-col">{{$t('common.form.preview.serviceItem.colum6')}}：{{sparpartOrder.salePrice}}</div>
            <div class="order-detail-col">{{$t('common.base.quantity')}}：{{sparpartOrder.number}}</div>
            <div class="order-detail-col">{{$t('common.form.preview.serviceItem.colum7')}}：{{sparpartOrder.salePrice * sparpartOrder.number}}</div>
          </div>
          <div class="order-detail-row" >
            <div class="order-detail-col">{{$t('common.form.preview.sparepart.label3')}}：{{sparpartOrder.standard}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="service-order">
      <div class="title">{{$t('portal.service')}}</div>
      <div class="order-detail">
        <div v-for="serviceOrder in orderSheet.serviceDetailList" :key="serviceOrder.id">
          <div class="order-detail-row" >
            <div class="order-detail-col">{{$t('common.base.name')}}：{{serviceOrder.name}}</div>
            <div class="order-detail-col">{{$t('common.part.serviceProviderNo')}}：{{serviceOrder.primarySN}}</div>
            <div class="order-detail-col">{{$t('common.form.preview.serviceItem.colum3')}}：{{serviceOrder.primaryType}}</div>
          </div>
          <div class="order-detail-row" >
            <div class="order-detail-col">{{$t('common.form.preview.serviceItem.colum6')}}：{{serviceOrder.salePrice}}</div>
            <div class="order-detail-col">{{$t('common.base.quantity')}}：{{serviceOrder.number}}</div>
            <div class="order-detail-col">{{$t('common.form.preview.serviceItem.colum7')}}：{{serviceOrder.salePrice * serviceOrder.number}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'order-info',
  props: {
    orderSheet: {
      type: Object,
      default: ()=> {}
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.order-info {
  padding: 0 20px;

  .title {
    font-weight: bold;
  }
  .order-detail {
    margin: 20px 0;
    &-row {
      display: flex;
      border-bottom: 1px solid #F1F1F1;
      padding-bottom: 5px;
      margin-bottom: 5px;
    }
    &-col {
      flex: 1 1 0%
    }
  }
}
</style>
